<template>
	<view class="warp">
		<uni-nav-bar background-color="#fff"
		 color="#0b2659" :border="false" :fixed="true"
		  @clickLeft="left"  left-icon="left" 
		   leftWidth="50rpx" rightWidth="10rpx" 
		   :statusBar="true"  
		   >
		   <view class="title_box">
		 	 <view class="left">
				<view class="left_text">
					已购买
				</view>
			</view>
		 	<view class="right">
				<!-- <uni-icons fontFamily="CustomFont" :size="26">{{'\ue62b'}}</uni-icons> -->
		 	</view>
		   </view>
		   </uni-nav-bar>
		   <view class="cont_box">
		   	<view class="tab_list">
		   		<view @click="changetab(index)" :class="tabIndex==index?'active':'item'" v-for="(item,index) in tabtitlelist" :key="index">
		   			<view class="tetx">
		   				{{item.name}}
		   				<view class="b_line">
		   					
		   				</view>
		   			</view>
		   			
		   		</view>
		   	</view>
		   </view>
		   <!-- 报告列表 -->
		   <swiper
		   :current="tabIndex"
		   duration="300"
		   class="swiper_box"
		   @change="changsw"
		   
		   >
		   	<swiper-item >
		   		<scroll-view  scroll-y class="list-scroll-content" @scrolltolower="onbottomfn">
		   			<!-- 数据列表 -->
		   			<template>
		   				 <view class="tab_cont_box" >
		   				 	 <view class="signlist" >
		   				 	 	 <view class="item" v-for="(item,index) in myproductlist" :key="index">
									 <view class="left">
									 	<image style="width: 200rpx; height: 200rpx;" :src="item.product.productCover" mode=""></image>
									 </view>
									 <view class="right">
									 	<view class="top">
									 		<view class="title">
									 			{{item.product.productName}}
									 		</view>
											<view class="l_title">
												{{item.product.productDetail}}
											</view>
									 	</view>
										<view class="bottom">
											<view class="b_left">
												<uni-icons style="vertical-align: middle;" type="calendar" size="22"></uni-icons>
												<span style="vertical-align: middle;margin-left: 6rpx;">{{item.product.salesCount}}人已解锁</span>
											</view>
											<view class="b_bottom">
												<view class="button" @click="lookreportfn(item)">
													查看报告
												</view>
											</view>
										</view>
									 </view>
								 </view>
		   				 	 </view>
							 <view class="warn_text" v-if="myproductlist.length==0">
							 	你还没有购买过报告哦~
							 </view>
							 
		   		<!-- 发现 -->
				<view class="recommend_report">
					<view class="title">
						发现
					</view>
					<view class="rr_list">
						<view class="item" v-for="(item,idx) in findreportlist" :key="idx">
								<view class="left">
									<image style="width: 200rpx; height: 200rpx;" :src="item.productCover" mode=""></image>
								 </view>
								 <view class="right">
								 <view class="top">
								<view class="title">
									 {{item.productName}}
								 </view>
								 <view class="l_title">
									 {{item.productDetail}}
									 </view>
									 </view>
								<view class="bottom">
								  <view class="b_left">
								      <uni-icons style="vertical-align: middle;" type="calendar" size="22"></uni-icons>
								      <span style="vertical-align: middle;margin-left: 6rpx;">{{item.salesCount}} 人已解锁</span>
									 </view>
									 <view class="b_bottom" @click="previewfn(item)">
									    <view class="button">
									      预览报告
									    </view>
									  </view>
								</view>
									 </view>
						</view>
					</view>
				</view>
		   				 </view>
		   			</template>
		   		</scroll-view>
		   		
		   	</swiper-item>
			<swiper-item  >
				<scroll-view  scroll-y class="list-scroll-content">
					<!-- 数据列表 -->
					<template>
						 <view class="tab_cont_box">
						 <!-- 	<view class="signlist">
						 	 	 <view class="item" v-for="(item,index) in myproductlist" :key="index">
									 <view class="left">
									 	<image style="width: 200rpx; height: 200rpx;" :src="item.product.productCover" mode=""></image>
									 </view>
									 <view class="right">
									 	<view class="top">
									 		<view class="title">
									 			{{item.product.productName}}
									 		</view>
											<view class="l_title">
												{{item.product.productDetail}}
											</view>
									 	</view>
										<view class="bottom">
											<view class="b_left">
												<uni-icons style="vertical-align: middle;" type="calendar" size="22"></uni-icons>
												<span style="vertical-align: middle;margin-left: 6rpx;">{{item.product.salesCount}}人已解锁</span>
											</view>
											<view class="b_bottom">
												<view class="button">
													查看报告
												</view>
											</view>
										</view>
									 </view>
								 </view>
						 	 </view> -->
							<view class="warn_text" >
							 	你还没有解锁过测试哦~
							 </view>
				<!-- 发现 -->
				<view class="recommend_report">
					<view class="title">
						发现
					</view>
					<view class="rr_list">
						<view class="item" v-for="(item,indx) in findreportlist" :key="indx">
								<view class="left">
									<image style="width: 200rpx; height: 200rpx;" :src="item.productCover" mode=""></image>
								 </view>
								 <view class="right">
								 <view class="top">
								<view class="title">
									 {{item.productName}}
								 </view>
								 <view class="l_title">
									 {{item.productDetail}}
									 </view>
									 </view>
								<view class="bottom">
								  <view class="b_left">
								      <uni-icons style="vertical-align: middle;" type="calendar" size="22"></uni-icons>
								      <span style="vertical-align: middle;margin-left: 6rpx;">{{item.salesCount}} 人已解锁</span>
									 </view>
									 <view class="b_bottom" @click="previewfn(item)">
									    <view class="button">
									      预览报告
									    </view>
									  </view>
								</view>
									 </view>
						</view>
					</view>
				</view>
						 </view>
					</template>
				</scroll-view>
				
			</swiper-item>
		   </swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabtitlelist:[{name:'我的报告'},{name:'我的测试'}, 
				                 ],
				tabIndex:0,
				findreportlist:[
					 
				],
				myproductlist:[],
				queryform:{
					pageSize:10,
					current:1
				},
				total:0
			};
		},
		onLoad() {
			this.getreportlist()
			this.getmyreportlist()
			
		},
		// 下拉刷新
	onPullDownRefresh(){
		this.getreportlist()
		this.getmyreportlist()
		setTimeout(()=>{
			  uni.stopPullDownRefresh()
		},2000)
	},
		// onReachBottom(){
		 
		// 	if(this.queryform.pageSize*this.queryform.current>this.total){
		// 		console.log('1');
		// 		uni.showToast({
		// 			title:"数据加载完毕",
		// 			icon:'none'
		// 		})
		// 	}else{
		// 		this.queryform.current++
		// 		this.$request({
		// 			url:'v3/business/front/report/list',
		// 			method:'GET',
		// 			data:this.queryform
		// 		}).then(res=>{
		// 			this.myproductlist.push(...res.data.list)
					
		// 		})
		// 	}
		// },
		methods:{
			lookreportfn(val){
				if(val.product.productType==1){
					// 财富
					uni.navigateTo({
						url:'/pages/moreModule/wealthreport/wealthreport?idinfo='+encodeURIComponent(JSON.stringify(val.masterInfo))
					})
				}else if(val.product.productType==2){
					
					uni.navigateTo({
						url:'/pages/moreModule/marriagereport/marriagereport?idinfo='+encodeURIComponent(JSON.stringify(val.masterInfo))
					})
				}else if(val.product.productType==3){
					
					uni.navigateTo({
						url:'/pages/moreModule/careerreport/careerreport?idinfo='+encodeURIComponent(JSON.stringify(val.masterInfo))
					})
				}else if(val.product.productType==7 || val.product.productType==8){
					console.log(val);
					let numberobj={}
					numberobj.year=val.masterInfo.masterBirthday.split(' ')[0].split('/')[0]
					numberobj.month=val.masterInfo.masterBirthday.split(' ')[0].split('/')[1]
					numberobj.day=val.masterInfo.masterBirthday.split(' ')[0].split('/')[2]
					numberobj.hour=val.masterInfo.masterBirthday.split(' ')[1].split(':')[0]
					numberobj.minute=val.masterInfo.masterBirthday.split(' ')[1].split(':')[1]
					numberobj.dateType=val.masterInfo.isLeap=='true' || val.masterInfo.isLeap=="false"?'1':'0'
					numberobj.leapMonth=val.masterInfo.isLeap=='true'?true:false
					numberobj.phone=val.masterPhone
					numberobj.numberType=val.masterPhone.length==11?1:2
					 console.log(numberobj);
					uni.navigateTo({
						url:'/pages/moreModule/numerology/numerologyinfo?numberobj='+encodeURIComponent(JSON.stringify(numberobj))
					})
				}else if(val.product.productType==4){
					let sygnform={
						api_key:'A4FpkA8Z2zMSZM7TjTE8sVoOV',
						male_name:val.masterInfo.masterName,//男方姓名
						male_type:val.masterInfo.isLeap=='true' || val.masterInfo.isLeap=="false"?'0':'1',//0农历1公历
						male_year: val.masterInfo.masterBirthday.split(' ')[0].split('/')[0], 
						male_month:val.masterInfo.masterBirthday.split(' ')[0].split('/')[1], 
						male_day: val.masterInfo.masterBirthday.split(' ')[0].split('/')[2], 
						male_hours: val.masterInfo.masterBirthday.split(' ')[1].split(':')[0], 
						male_minute:val.masterInfo.masterBirthday.split(' ')[1].split(':')[1], 
						female_name:val.masterInfo.masterName,//女方姓名
						female_type:val.masterInfo.isLeap=='true' || val.masterInfo.isLeap=="false"?'0':'1',//0农历1公历,//0农历1公历
						female_year:val.masterInfo.masterBirthday.split(' ')[0].split('/')[0], 
						female_month:val.masterInfo.masterBirthday.split(' ')[0].split('/')[1],
						female_day:val.masterInfo.masterBirthday.split(' ')[0].split('/')[2],
						female_hours:val.masterInfo.masterBirthday.split(' ')[1].split(':')[0], 
						female_minute:val.masterInfo.masterBirthday.split(' ')[1].split(':')[1], 
					}
				uni.navigateTo({
					 url:'/pages/moreModule/syngamyinfo/syngamyinfo?syngobj='+encodeURIComponent(JSON.stringify(sygnform))
								 })
				}else if(val.product.productType==5){
					let nameform={
						name:val.masterInfo.masterName,
						gender:val.masterInfo.gender,
						year: val.masterInfo.masterBirthday.split(' ')[0].split('/')[0], 
						month:val.masterInfo.masterBirthday.split(' ')[0].split('/')[1],  
						day: val.masterInfo.masterBirthday.split(' ')[0].split('/')[2],
						hour: val.masterInfo.masterBirthday.split(' ')[1].split(':')[0],
						minute: val.masterInfo.masterBirthday.split(' ')[1].split(':')[1],  
						isLeap: val.masterInfo.isLeap,
						
					}
					uni.navigateTo({
						 url:'/pages/moreModule/name/nameexplain/nameexplain?nameobj='+encodeURIComponent(JSON.stringify(nameform))
									 })
				}
				
			},
			// 滚动到底部数据加载
			onbottomfn(){
				 if(this.queryform.pageSize*this.queryform.current>this.total){
				 	uni.showToast({
				 		title:"数据加载完毕",
				 		icon:'none'
				 	})
				 }else{
				 	this.queryform.current++
				 	this.$request({
				 		url:'v3/business/front/report/list',
				 		method:'GET',
				 		data:this.queryform
				 	}).then(res=>{
				 		this.myproductlist.push(...res.data.list)
				 		
				 	})
				 }
			},
			// 获取我的报告
			getmyreportlist(){
				this.$request({
					url:'v3/business/front/report/list',
					data:this.queryform
				}).then(res=>{
					console.log(res);
					if(res.state==200){
						this.myproductlist=res.data.list
						this.total=res.data.pagination.total

					}
				})
			},
			// 获取推荐报告列表
			getreportlist(){
				this.$request({
					url:'v3/business/front/product/list',
					method:'GET',
					data:{
						isDefault:1
					}
				}).then(res=>{
					if(res.state==200){
						this.findreportlist=res.data.list
					}
				})
			},
			// 预览报告
			previewfn(val){
				uni.navigateTo({
					url:'/pages/moreModule/reportPreview/reportPreview?produtinfo='+encodeURIComponent(JSON.stringify(val))
				})
			},
			
			changetab(idx){
				this.tabIndex=idx
			},
			changsw(e){
				if(e.detail.current==0){
					this.getmyreportlist()
				}
				this.tabIndex=e.detail.current
				
			},
			left(){
				uni.navigateBack({delta:1})
			}
		}
	}
</script>
<style>
	page{
		background-color: #f2f2f2;
	}
</style>
<style lang="scss" scoped>
.warp{
	.title_box{
		padding: 0 20rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left{
			display: flex;
			align-items: center;
			.left_text{
				font-size: 30rpx !important;
				margin-right: 10rpx;
				
			}
			.left_icon{
				width: 30rpx;
				height: 30rpx;
				text-align: center;
				line-height: 30rpx;
				border: 2rpx solid #323333;
				border-radius: 50%;
				
			}
			
		}
	}
	.cont_box{
		 
		padding: 20rpx;
		background-color: #fff;
		white-space: nowrap;
		overflow: hidden;
		.tab_list{
			padding: 10rpx 20rpx;
			// display: flex;
			// justify-content: flex-start;
			overflow-x: scroll;
			box-sizing: border-box;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
			.item{
				display: inline-block;
				 margin-right: 100rpx;
				color: #7c7e7e;
				font-size: 28rpx;
				.tetx{
					display: inline-block;
				}
			}
			.active{
				 
				display: inline-block;
				color: #232323;
				font-size: 30rpx;
				 margin-right: 100rpx;
				.tetx{
					display: inline-block;
					text-align: center;
					.b_line{
						margin-top: 6rpx;
						height: 6rpx;
						background-color: #73ddf9;
						border-radius: 3rpx;
					}
				}
			}
		}
	}
	.swiper_box{
		  height: calc(100vh - 100px);
		  // background-color: #fff;
	}
	.list-scroll-content{
		height: 100%;
	}
	.tab_cont_box{
		padding: 10rpx 20rpx;
		// text-align: center;
		.warn_text{
			text-align: center;
			font-size: 30rpx;
			padding: 100rpx;
		}
		.signlist,.recommend_report{
			padding: 10rpx 0rpx;
			.title{
				font-size: 32rpx;
				font-weight: 550;
			}
			.item{
				margin-top: 20rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				padding: 20rpx 20rpx;
				border-radius: 20rpx;
				.left{
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
					background-color: #cecece;
				}
				.right{
					margin-left: 20rpx;
					.top{
						.title{
							font-size: 32rpx;
							font-weight: 550;
							padding-bottom: 10rpx;
						}
						.l_title{
							padding-bottom: 10rpx;
							font-size: 26rpx;
							color: #232323;
							 width: 450rpx;
							overflow: hidden; /* 隐藏溢出的内容 */
							  text-overflow: ellipsis; /* 显示省略号 */
							  white-space: nowrap; /* 防止文本换行 */
						}
					}
					.bottom{
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						 align-items: center;
						.b_left{
							font-size: 26rpx;
							color: #cecece;
						}
						.b_bottom{
							.button{
								padding: 20rpx 40rpx;
								border-radius: 40rpx;
								font-size: 28rpx;
								color: #fff;
								background-color: #fe5a89;
							}
						}
						
					}
				}
			}
			}
			.recommend_report{
				margin-top: 20rpx;
			}
	}
}
</style>
